<script setup lang="ts">
import Language from "@renderer/view/settingPage/components/Language.vue";
import ImgShowSetting from "@renderer/view/settingPage/components/ImgShowSetting.vue";
import CrossSetting from "@renderer/view/settingPage/components/CrossSetting.vue";
import {useSystemSettingStore} from '@renderer/store/pinia/systemSetting'
import {useTabManagerStore} from '@renderer/store/pinia/tabManager'
import { onActivated, onMounted } from "vue";
import { idHelper } from "@renderer/store/pinia/helper";
import WindowSetting from "@renderer/view/settingPage/components/WindowSetting.vue";

const resetSetting = () => {
  const systemSettingStore = useSystemSettingStore();
  systemSettingStore.reset();
}
const close = () => {
  const tabStore = useTabManagerStore()
  const settingTabId = idHelper.generateNewTabId({
    tabType: 'setting'
  });
  tabStore.removeTabById(settingTabId);
}

onMounted(() => {
  console.log('setting page mounted');
})
onActivated(() => {
  console.log('setting page activated');
})

</script>

<template>
  <div class="w-full h-full flex justify-center overflow-y-auto">
    <v-card
      width="600"
      class="min-h-max"
    >
      <template v-slot:text>
        <v-container >
          <language/>
          <img-show-setting/>
          <cross-setting/>
          <window-setting/>
        </v-container>
      </template>

      <template v-slot:actions>
          <div class="w-full flex justify-center">
            <v-btn variant="outlined" @click="resetSetting" class="!mr-[30px]">重置</v-btn>
            <v-btn variant="outlined" color="active" @click="close">关闭</v-btn>
          </div>
      </template>

    </v-card>
  </div>




</template>

<style scoped>
</style>
